<template>
	<div class="abs-page ucenter-index">
		<Head navTitle="个人资料" isIndex/>
		<div class="page-container ">
			<!-- pc -->
			<div class="pc-show" v-if="windowWidth>1000">
				<el-row :gutter="16">
					<el-col :xs="24" :lg="14">
						<div class="bs-panel bs-uc-panel">
							<div class="bs-panel-body">
								<div class="bs-panel-heading flex-center flex-zBetween">
									<div class="tt">个人资料</div><el-button size="small" @click="editVshow = true" type="success"><span class="el-icon-edit"></span> 编辑</el-button>
								</div>
								<div class="uc-cell flex-center">
									<img src="../../assets/images/touxiang.png" ><span class="uc-id">昵称：James</span>
								</div>
								<el-row class="uc-rows">
									<el-col :span="5">
										<div class="uc-info-item flex-center">
											<span class="text">您的姓名：</span><span class="btn">未设置</span>
										</div>
									</el-col>
									<el-col :span="7">
										<div class="uc-info-item flex-center">
											<span class="text">生日：</span><span class="btn">未设置</span>
										</div>
									</el-col>
									<el-col :span="12">
										<div class="uc-info-item flex-center">
											<span class="text">新登入密码：</span><span>******</span>
										</div>
									</el-col>
									<el-col :span="12">
										<div class="uc-info-item flex-center">
											<span class="text">手机号：</span><span>155730709908</span>
										</div>
									</el-col>
									<el-col :span="12">
										<div class="uc-info-item flex-center">
											<span class="text">提现密码：</span><span>******</span>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
						<div class="bs-panel pocket-panel bs-overflow">
							<div class="bs-data-cells">
								<div class="bs-panel-heading flex-center flex-zBetween">
									<div class="tt">个人钱包</div>
									<router-link to="/trade" class="more">个人有效交易 <i class="iconfont icon-right"></i></router-link>
								</div>
								<div class="bs-data-grid">
									<div class="val">1,000,342,418.00</div>
									<div class="txt">可用余额keyongyue</div>
								</div>
							</div>
							<el-row type="flex" align="middle" class="data-row">
								<el-col :span="8">
									<div class="val">1,000,342,418.00</div>
									<div class="txt">可用余额</div>
								</el-col>
								<el-col :span="8">
									<div class="val">1,000,342,418.00</div>
									<div class="txt">累计有效交易金额</div>
								</el-col>
								<el-col :span="8">
									<div class="val"><span class="text-red">-988,800,000.00</span>/0.00</div>
									<div class="txt">累计有效交易金额</div>
								</el-col>
							</el-row>
						</div>
						<div class="bs-panel bs-card-panel">
							<div class="bs-panel-body">
								<div class="bs-panel-heading flex-center flex-zBetween">
									<div class="tt">卡片管理</div>
									<el-button size="small" type="success" @click="bankVshow = true"><span class="el-icon-circle-plus-outline"></span> 添加银行卡</el-button>
								</div>
								<el-row :gutter="20" class="pocket-row">
									<el-col :span="8">
										<div class="bank-card">
											<div class="bank-head">
												<div class="txt">VietinBank</div>
												<div class="txt-sm">储蓄卡</div>
											</div>
											<div class="bank-val">**** **** **** 3423</div>
											<div class="ball-icon"></div>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="bank-card">
											<div class="bank-head">
												<div class="txt">VietinBank</div>
												<div class="txt-sm">储蓄卡</div>
											</div>
											<div class="bank-val">**** **** **** 3423</div>
											<div class="ball-icon"></div>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="bank-card">
											<div class="bank-head">
												<div class="txt">VietinBank</div>
												<div class="txt-sm">储蓄卡</div>
											</div>
											<div class="bank-val">**** **** **** 3423</div>
											<div class="ball-icon"></div>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :lg="10">
						<div class="bs-panel ht-panel uc-table-panel">
							<div class="uc-tab">
								<el-tabs class="bs-tab-flex" v-model="activeName">
									<el-tab-pane label="充值记录" name="retab"></el-tab-pane>
									<el-tab-pane label="提现记录" name="whtab"></el-tab-pane>
								</el-tabs>
							</div>
							<div class="ball-table" v-show="activeName == 'retab'">
								<el-table stripe v-infinite-scroll="load" infinite-scroll-disabled="disabled" :data="tableData" style="width: 100%">
									<el-table-column align="center" prop="pid" label="项目/订单号" >
										<template slot-scope="scope">
											<div class="item">充值</div><div class="item">{{scope.row.pid}}</div>
										</template>
									</el-table-column>
									<el-table-column align="center" prop="ptime" label="提交时间" >
									</el-table-column>
									<el-table-column align="center" prop="price" label="金额">
									</el-table-column>
									<el-table-column align="center" prop="pstatus" label="状态">
										<template slot-scope="scope">
											<span :class="scope.row.pstatus == '交易失败'?'text-red':'text-green'">{{scope.row.pstatus}}</span>
										</template>
									</el-table-column>
								</el-table>
								<div class="load-more" v-if="loading">加载中...</div>
								<div v-if="noMore">没有更多了</div>
							</div>
							<div class="ball-table" v-show="activeName == 'whtab'">
								<el-table stripe v-infinite-scroll="load2" infinite-scroll-disabled="disabled2" :data="tableData2" style="width: 100%">
									<el-table-column align="center" prop="pid" label="项目/订单号" >
										<template slot-scope="scope">
											<div class="item">提现</div><div class="item">{{scope.row.pid}}</div>
										</template>
									</el-table-column>
									<el-table-column align="center" prop="ptime" label="提交时间" >
									</el-table-column>
									<el-table-column align="center" prop="price" label="金额">
									</el-table-column>
									<el-table-column align="center" prop="pstatus" label="状态">
										<template slot-scope="scope">
											<span :class="scope.row.pstatus == '交易失败'?'text-red':'text-green'">{{scope.row.pstatus}}</span>
										</template>
									</el-table-column>
								</el-table>
								<div class="load-more" v-if="loading2">加载中...</div>
								<div v-if="noMore2">没有更多了</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 手机 -->
			<div class="m-show" v-else>
				<div class="bs-data-cells">
					<div class="bs-data-grid">
						<div class="val">1,000,342,418.00</div>
						<div class="txt">可用余额keyongyue</div>
					</div>
					<div class="data-btns">
						<el-button  @click="goUrl('/recharge')" type="success">充值chongzhi</el-button>
						<el-button  @click="goUrl('/withdraw')" type="primary">提现tixian</el-button>
					</div>
				</div>
				<el-row type="flex" align="middle" class="data-row data-m-row">
					<el-col :span="12">
						<div class="val">1,000,342,418.00</div>
						<div class="txt">未结算金额</div>
					</el-col>
					<el-col :span="12">
						<div class="val">1,000,342,418.00</div>
						<div class="txt">累计有效交易金额</div>
					</el-col>
				</el-row>
				<div class="uc-cells">
					<div class="uc-cell-row flex-center" @click="goUrl('/profile')">
						<div class="uc-icon"><img src="../../assets/images/uc1.png" ></div>
						<div class="flex_bd">个人资料gerenziliao</div>
						<div class="iconfont icon-right"></div>	
					</div>
					<div class="uc-cell-row flex-center" @click="goUrl('/ucRecord')">
						<div class="uc-icon"><img src="../../assets/images/uc2.png" ></div>
						<div class="flex_bd">充提记录chongzhitixianjil</div>
						<div class="iconfont icon-right"></div>	
					</div>
					<div class="uc-cell-row flex-center" @click="goUrl('/bankCard')">
						<div class="uc-icon"><img src="../../assets/images/uc3.png" ></div>
						<div class="flex_bd">卡片管理kapianguanli</div>
						<div class="iconfont icon-right"></div>	
					</div>
					<div class="uc-cell-row flex-center" @click="goUrl('/kefu')">
						<div class="uc-icon"><img src="../../assets/images/uc4.png" ></div>
						<div class="flex_bd">线上客服xianshangkefu</div>
						<div class="iconfont icon-right"></div>	
					</div>
					<div class="uc-cell-row flex-center" @click="goUrl('/download')">
						<div class="uc-icon"><img src="../../assets/images/uc5.png" ></div>
						<div class="flex_bd">APP下载xiazai</div>
						<div class="iconfont icon-right"></div>	
					</div>
					<div class="uc-cell-row flex-center" @click="goUrl('/about')">
						<div class="uc-icon"><img src="../../assets/images/uc1.png" ></div>
						<div class="flex_bd">关于BIG</div>
						<div class="iconfont icon-right"></div>	
					</div>
				</div>
				<div class="uc-footer">
					<el-button type="danger">退出登录</el-button>
				</div>
			</div>
			<!-- 修改个人资料 -->
			<el-dialog custom-class="bs-dialog bs-bg-dialog" title="修改个人资料" :visible.sync="editVshow" width="620px" >
				<div class="bs--form">
					<el-form ref="editform" :model="editform" label-position="top">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="upload-box">
									<el-upload
									class="avatar-uploader"
									action="https://jsonplaceholder.typicode.com/posts/"
									:show-file-list="false"
									:on-success="handleAvatarSuccess"
									>
										<img v-if="imageUrl" :src="imageUrl" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<div class="upload-txt">点击上传头像</div>
								</div>
							</el-col>
							<el-col :span="12">
								<el-form-item label="昵称">
									<el-input v-model="editform.ncname" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="生日">
									<el-date-picker v-model="editform.birthday" type="date" placeholder="选择日期"></el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="手机区号">
									<el-input v-model="editform.quhao" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="手机号码">
									<el-input v-model="editform.phone" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="middle-line"></div>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="输入原始密码">
									<el-input v-model="editform.pwd1" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="新登入密码">
									<el-input v-model="editform.pwd2" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="提现密码">
									<el-input v-model="editform.pwd3" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="验证码">
									<div class="flex-center">
										<div class="flex_bd">
											<el-input v-model="editform.code" placeholder="请输入验证码"></el-input>
										</div>
										<el-button type="success" class="get-code" @click.prevent="getCode()"
											:disabled="!show">
												<span v-show="show">获取验证码</span>
												<span v-show="!show" class="codeCount">{{codeCount}} s</span>
										</el-button>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div slot="footer" class="dialog-footer flex">
					<div class="col">
						<el-button type="info" @click="editVshow = false">取 消</el-button>
					</div>
					<div class="col">
						<el-button type="success" @click="editVshow = false">保 存</el-button>
					</div>
				</div>
			</el-dialog>
			<!-- 添加银行卡 -->
			<el-dialog custom-class="bs-dialog bs-bg-dialog" title="添加银行卡" :visible.sync="bankVshow" width="620px" >
				<div class="bs--form">
					<el-form ref="bankform" :model="bankform" label-position="top">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="户名">
									<el-input v-model="bankform.uname" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="银行名称">
									<el-input v-model="bankform.bkname" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="银行账户">
									<el-input v-model="bankform.bkaccount" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="开卡行">
									<el-input v-model="bankform.khk" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="开户银行省">
									<el-input v-model="bankform.pro" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="开户银行市">
									<el-input v-model="bankform.city" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="备注">
									<el-input v-model="bankform.bz" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div slot="footer" class="dialog-footer flex">
					<div class="col">
						<el-button type="info" @click="bankVshow = false">取 消</el-button>
					</div>
					<div class="col">
						<el-button type="success" @click="bankVshow = false">保 存</el-button>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				activeName:'retab',
				tableData: [{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},],
				count2: 10,
				loading2: false,
				tableData2: [{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易失败'
				},{
					pid: '2104260184297342',
					ptime: '2021-09-06',
					price: '32,032.00',
					pstatus: '交易完成'
				},],
				count: 10,
				loading: false,
				// 弹出
				editVshow:false,
				bankVshow:false,
				editform: {
					ncname: 'LI',
					birthday: '2021-09-10',
					quhao: '86',
					phone: '15573070908',
					pwd1: '123456',
					pwd2: '123456',
					pwd3: '123456',
				},
				imageUrl: require('../../assets/images/touxiang.png'),
				bankform: {
					uname: '',
					bkname: '',
					bkaccount: '',
					khk: '',
					pro: '',
					city: '',
					bz: '',
				},
				windowWidth: document.documentElement.clientWidth,
				show: 'false',
				codeCount: '',
			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			},
			noMore2() {
				return this.count2 >= 20
			},
			disabled2() {
				return this.loading2 || this.noMore2
			}
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 15; i++) {
						this.tableData.push({
							pid: '2104260184297342',
							ptime: '2021-09-06',
							price: '32,032.00',
							pstatus: '交易完成'
						});
					}
					this.loading = false
				}, 2000)
			},
			load2() {
				this.loading2 = true
				setTimeout(() => {
					for (let i = 0; i < 5; i++) {
						this.tableData2.push({
							pid: '2104260184297342',
							ptime: '2021-09-06',
							price: '32,032.00',
							pstatus: '交易完成'
						});
					}
					this.loading2 = false
				}, 2000)
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			goUrl(url){
				this.$router.push(url);
			},
			getCode() {
				// 验证码倒计时
				if (!this.timer) {
					this.codeCount = 60;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.codeCount > 0 && this.codeCount <= 60) {
							this.codeCount--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			}
		}
	}
</script>
